<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body,html{
      background-color: #e3eaf6;
      width: 100%;
      height: 100%;
    }
    .list_top_header .t_header_c{
      border: 0;
    }
    .col-1{
      font-size: 1.8vw;
      padding: 1vw 2.8vw;
      /*height: 0.9rem;*/
      text-align: center;
      /*line-height: 0.9rem;*/
      background-color: #fa4340;
      border: 0;
      color: #ffffff;
    }
    .table{
      margin:  0 auto;
    }
    .container{
      width: 97%;
      height: 97%;
      margin:  0.4rem auto 0;
      background-color: #ffffff;
      border-radius: 4px;
    }
    .header{
     overflow: hidden;
    }
    .header_top_s{
      font-size:1.2rem;
      margin-top: 1.9rem;
      width: 100%;
      text-align: center;
    }
    .header_sec_s{
      width: 100%;
      text-align: center;
      font-size: 0.8rem;
      margin-top: 0.8rem;
      margin-bottom: 1.3rem;
    }
    .table-bordered td {
      border-bottom: 1px solid #ddd;
    }
    .sequence{
      border: 1px solid #ddd;
      background-color: #ffffff;
      color: #333333;
    }
    .container{
      position: relative;
    }
    .logo{
      position: absolute;
      top:0;
      right: 4vw;
    }
    .goback_btn{
      width: 15vw;
      height: 2.5rem;
      line-height: 2.5rem;
      color: #fa3c3c;
      font-size: 1.8vw;
      border-radius: 2vw;
      border: 3px solid #fa3c3c;
      text-align: center;
      position: absolute;
      bottom: 2rem;
      left:2.2vw;
    }
    .out_btn{
      width: 15vw;
      height: 2.5rem;
      border-radius: 2vw;
      color: #fff;
      background-color: #a7a7a7;
      line-height: 2.5rem;
      text-align: center;
      position: absolute;
      bottom:2rem;
      left:20vw;
      border: 3px solid #a7a7a7;
    }
    .select{
      position: absolute;
      bottom:2.5rem;
      left:45vw;
      font-size: 0.9rem;
    }
    .select select{
      width: 12vw;
      height: 1.5rem;
    }
    .select_w{
      margin-right: 1vw;
    }
    .logo_n{
      position: absolute;
      bottom: 2rem;
      right: 4vw;
    }
  </style>
  <link rel="stylesheet" href="dist/static/sprites/input/input_sprite.css">
  <link rel="stylesheet" href="static/css/reset.css">
</head>
<body>
<div class="container">
  <div class="header">
      <p class="header_top_s">东二食堂领料单</p>
      <p class="header_sec_s">2017年7月12日</p>
  </div>
  <table class="table table-border table-bordered table-bgcolor-gary" cellpadding="0" cellspacing="0">
    <thead class="text-c row cl list_top_header">
    <tr>
      <th class="col-1">序号</th>
      <th class="col-1">一级类目</th>
      <th class="col-1">二级类目</th>
      <th class="col-1">商品名称</th>
      <th class="col-1">单位</th>
      <th class="col-1">单价</th>
      <th class="col-1">数量</th>
      <th class="col-1">总计</th>
      <th class="col-1">备注</th>
    </tr>
    </thead>
    <tr class="table-bordered">
      <td class="col-1 sequence max_w_limit">1</td>
      <td class="col-1 sequence max_w_limit" rowspan="\{{num_f}}">2</td>
      <td class="col-1 sequence max_w_limit" rowspan="\{{mun_sec}}">3</td>
      <td class="col-1 sequence max_w_limit">4</td>
      <td class="col-1 sequence max_w_limit">5</td>
      <td class="col-1 sequence max_w_limit">5</td>
      <td class="col-1 sequence max_w_limit">5</td>
      <td class="col-1 sequence max_w_limit">5</td>
      <td class="col-1 sequence max_w_limit">5</td>
    </tr>
  </table>
  <div class="logo icon-yiyunhualogo"></div>
  <div class="goback_btn">
    返回
  </div>
  <div class="out_btn">
    出库
  </div>
  <div class="select">
     <span class="select_w">出库至</span>
     <select name="" id=""></select>
  </div>
  <div class="icon-yiyunahu_n_logo logo_n"></div>
</div>

</body>
<script>
  (function (doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
      recalc = function () {
        //  var clientWidth = docEl.clientWidth;
        // if (clientWidth === undefined) return;
//                 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        var clientHeight=docEl.clientHeight;
        // console.log(clientHeight);
        if(clientHeight == undefined)return;
        docEl.style.fontSize = 20 * (clientHeight / 685) + 'px';
      };
    if (doc.addEventListener === undefined) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false)
  })(document, window);
</script>
</html>
